<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-row>
        <el-col :span="10">
          <DBUserInfo :userInfoData="this.userInfoData"></DBUserInfo>
          <DBCalendar></DBCalendar>
          <DBRadar></DBRadar>
        </el-col>
        <el-col :span="14">
          <DBNightingaleChart
            v-if="this.sectorData.length != 0"
            :sectorData="this.sectorData"
          ></DBNightingaleChart>
          <DBGauge></DBGauge>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import DBCalendar from './cpns/DB-calendar'
import { mapGetters } from 'vuex'
import { getEmployees, getPersonalInfo, getSalarysModify } from '@/api'
import DBNightingaleChart from './cpns/DB-nightingaleChart.vue'
import DBUserInfo from './cpns/DB-userInfo.vue'
import DBRadar from './cpns/DB-radar.vue'
import DBGauge from './cpns/DB-gauge.vue'
export default {
  name: 'dashboard',
  data() {
    return {
      sectorData: [],
      userInfoData: {},
    }
  },

  created() {
    this.fatchReports()
    this.fatchPersonalInfo()
  },
  methods: {
    async fatchReports() {
      const { data: res } = await getEmployees(1, 30)
      this.getSectorData(res.rows)
    },
    getSectorData(rows) {
      let newArr = []
      // 提取出每个人的部门
      const tempArr = rows.map((item) => {
        return item.departmentName
      })
      // 遍历整合成新数组
      tempArr.forEach((item) => {
        let key = newArr.findIndex((val) => {
          return val.name == item
        })
        // 只要item有值 才执行判断
        if (item != undefined) {
          if (key != -1) {
            newArr[key].value = newArr[key].value + 1
          } else {
            newArr.push({ name: item, value: 1 })
          }
        }
      })
      this.sectorData = newArr
    },
    async fatchPersonalInfo() {
      const { data: res1 } = await getPersonalInfo(this.userId)
      // const { data: res1 } = await getSalarysModify(this.userId)
      this.userInfoData = { ...res1 }
    },
  },
  computed: {
    // 获取到用户id
    ...mapGetters(['userId']),
  },
  components: { DBCalendar, DBNightingaleChart, DBUserInfo, DBRadar, DBGauge },
}
</script>

<style lang="less" scoped>
.app-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
